<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 引入vue的js文件，放在文件的头部 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <div id="root">

        <!-- Vue对常用的9个按键做了别名
            回车    enter
            删除    delete
            退出    esc
            空格    space
            换行    tab
            上      up
            下      down
            左      left
            右      right 
        -->
        <!-- 获取键盘的弹起事件，.enter表示只对回车生效 -->
        <input type="text" placeholder="请按下回车" @keyup.enter="showInfo1">

        <br>
        <!-- 组合按键，Ctrl 或 y 键 弹起时候都触发  -->
        <input type="text" placeholder="Ctrl 或 y 键" @keyup.Control.y="showInfo1">

    </div>


</body>
<script type="text/javascript">

    const vm = new Vue({
        el: "#root",
        data: {

        },
        methods: {
            // 绑定事件的回调，必须写在methods里面
            // methods 里面的函数，都是被 VM 管理的
            showInfo1(e) {

                // key 表示按键的别名，可以获取到别名后到页面标签中使用
                // keyCode 表示键盘的回车键的编码，是13，如果上面不加 .enter 的话，也可以在这里做判断
                // if (e.keyCode != 13) return

                alert(e.target.value)
            },


        }
    })
</script>

</html>